<template>
  <div v-if="visible" class="modal-mask">
    <div class="modal-container">
      <!-- 关闭按钮 -->
      <button class="close-button" @click="closeModal">×</button>

      <!-- 登录内容 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="账号登录" name="account">
          <AccountLogin @login-success="handleLoginSuccess" />
        </el-tab-pane>
        <el-tab-pane label="验证码登录" name="code">
          <CodeLogin @login-success="handleLoginSuccess" />
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <Register @register-success="handleLoginSuccess" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import AccountLogin from "@/components/AccountLogin.vue";
import CodeLogin from "@/components/CodeLogin.vue";
import Register from "@/components/Register.vue";

export default {
  name: "LoginModal",
  components: {
    AccountLogin,
    CodeLogin,
    Register
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  emits: ["update:visible", "login-success"], // Emit login-success event to parent
  data() {
    return {
      activeTab: "account", // 默认显示账号登录
    };
  },
  methods: {
    closeModal() {
      this.$emit("update:visible", false); // 关闭模态框
    },
    // 处理登录/注册成功
    handleLoginSuccess(userData) {
      this.$emit("login-success", userData); // 向父组件发送登录成功事件
      this.$emit("update:visible", false); // 登录或注册成功后关闭模态框
    },
  },
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 400px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
</style>
